<template>
	<view>
		<view style="padding: 20rpx;">
			<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
			<!-- #ifndef APP-NVUE -->
			<u-input v-model="keyword" placeholder="输入关键字搜索用户/群聊">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input v-model="keyword" placeholder="输入关键字搜索用户/群聊">
					<!-- #endif -->
					<template slot="suffix">
						<u-button
							@tap="search()"
							:text="'搜索'"
							type="success"
							size="small"
						></u-button>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
		</view>
		
		<!-- 搜索结果 -->
		<view>
			<!-- 用户 -->
			<view>
				<view v-show="hasResult" style="margin-top: 10rpx;margin-left: 25rpx;color: darkgrey;">搜索到的用户</view>
				<u-empty
					v-show="keyword!==''&&hasResult&&personList.length===0"
					mode="search"
					icon="../../static/image/search-empty.png"
				></u-empty>
				<view v-show="hasResult" style="width: 90%;margin-left: 5%;margin-top: 20rpx;">
					<u-row @tap="gotoPage('friend', item.id)" class="row" customStyle="margin-bottom: 10px" v-for="(item,index) in personList" :key="index">
					    <u-col span="2">
					        <u-avatar :src="item.avatar" shape="square"></u-avatar>
					    </u-col>
					    <u-col span="10">
					        <view>{{item.nickname}}</view>
					    </u-col>
					</u-row>
					<u-line></u-line>
				</view>
			</view>
			<!-- 群聊 -->
			<view>
				<view v-show="hasResult" style="margin-top: 10rpx;margin-left: 25rpx;color: darkgrey;">搜索到的群组</view>
				<u-empty
					v-show="keyword!==''&&hasResult&&groupList.length===0"
					mode="search"
					icon="../../static/image/search-empty.png"
				></u-empty>
				<view v-show="hasResult" style="width: 90%;margin-left: 5%;margin-top: 20rpx;">
					<u-row @tap="gotoPage('group', item.id)" class="row" customStyle="margin-bottom: 10px" v-for="(item,index) in groupList" :key="index">
					    <u-col span="2">
					        <u-avatar :src="item.avatar" shape="square"></u-avatar>
					    </u-col>
					    <u-col span="10">
					        <view>{{item.name}}</view>
					    </u-col>
					</u-row>
					<u-line></u-line>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userRequest from '@/api/user.js';
	export default {
		data() {
			return {
				hasResult: false,
				keyword: '',
				groupList: [],
				personList: []
			}
		},
		methods: {
			async search(){
				this.keyword = this.keyword.trim();
				if(this.keyword===''){
					this.showTip('请输入有效内容');
					return;
				}
				let res = await userRequest.search({
					keyword:this.keyword
				})
				//console.log(res)
				this.personList = res.data.userList
				this.groupList = res.data.groupList
				this.hasResult = true;
			},
			gotoPage(where,id){
				switch(where){
					case 'friend':
					uni.navigateTo({
						url:'/pages/info/friend-info?id='+id
					})
					break;
					case 'group':
					uni.navigateTo({
						url:'/pages/info/group-info?id='+id
					})
					break;
				}
			},
			showTip(tip){
				uni.showToast({
					icon:"none",
					title:tip
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.row:active{
	background-color: #ebebeb;
}
</style>
